<template>
  <div class="consulting-start startZx positRel">
    <div class="main">
      <MenuLocation :title="'在线咨询 / 开始咨询'"></MenuLocation>
      <div class="start-content">
        <div class="doctor-name">
          <img
            class="face"
            src="@/assets/online_consulting/start/face.png"
            alt=""
          />
          <span class="title">问专家</span>
          <span class="name">{{ expertName }}</span>
        </div>
        <div class="choose-consultant">
          <Title :titles="'选择咨询人'" :top="20"></Title>
          <div class="consultant-content">
            <div class="add-consultant" @click="addHandle">
              <img
                class="add-btn"
                src="@/assets/online_consulting/start/add.png"
                alt=""
              />
              <span class="title">添加咨询人</span>
            </div>
            <div
              class="consultant-information"
              v-for="(item, index) in consultantList"
              :key="index"
              :style="index > 3 ? 'margin-top:calc(20/1920*100vw)' : ''"
            >
              <img
                @click="chooseHandle(index)"
                class="choose-img"
                :src="
                  item.checked
                    ? require('@/assets/online_consulting/start/choosed.png')
                    : require('@/assets/online_consulting/start/choose.png')
                "
                alt=""
              />
              <span class="name">{{ item.username }}</span>
              <span class="id">{{ item.visitCardNo }}</span>
            </div>
          </div>
        </div>
        <div class="ask">
          <Title :titles="'咨询问题'" :top="30"></Title>
          <div class="input-text">
            <Input
              type="textarea"
              v-model="askVal"
              placeholder="为了获得更好的帮助，请尽可能的描述您的基本情况，病情描述不得少于10个字"
              style="width: 98%"
              maxlength="500"
              show-word-limit
            />
          </div>
        </div>
        <div class="add-img">
          <Title :titles="'添加图片'" :top="22"></Title>
          <div class="add-row">
            <div class="uploadCla">
              <div class="upload-list" v-if="uploadList.length > 0">
                <div
                  class="upload-list-item"
                  v-for="(item, index) in uploadList"
                  :key="index"
                >
                  <img :src="item" style="width: 128px; height: 128px" />
                  <div class="upload-list-cover">
                    <Icon
                      type="ios-trash-outline"
                      size="20"
                      color="#ffffff"
                      @click.native="handleRemove(index)"
                    ></Icon>
                  </div>
                </div>
              </div>
              <Upload
                :show-upload-list="false"
                ref="upload"
                :on-success="handleSuccess"
                :format="['jpg', 'jpeg', 'png', 'bmp']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                :headers="accessToken"
                :multiple="true"
                type="drag"
                :action="action"
                style="display: inline-block; width: 128px"
              >
                <div
                  style="
                    width: 128px;
                    height: 128px;
                    line-height: 128px;
                    border: 1px #ebebeb solid;
                    background-color: #f7f7f7;
                  "
                >
                  <!--<span style="font-size: 25px">+</span>-->
                  <img src="@/assets/images/img-t.png" alt="" />
                </div>
              </Upload>
              <span style="font-size: 14px; color: #b3b3b3"
                >只能上传jpg/png文件，且不超过2MB（最多可上传3张图片）</span
              >
            </div>
          </div>
        </div>
        <div class="sure-btn" @click.stop="sureHandle">确认咨询</div>
      </div>
    </div>
    <Footer :top="20"></Footer>
    <div class="add-modal">
      <Modal
        v-model="isShow"
        title="添加咨询人"
        @on-ok="ok"
        @on-cancel="cancel"
        width="800"
        ok-text="添加"
      >
        <div class="name-row">
          <span class="title-row">姓名</span>
          <Input
            v-model="params.username"
            placeholder="请输入姓名"
            style="width: 100%"
          />
        </div>
        <div class="name-row">
          <span class="title-row">身份证号</span>
          <Input
            v-model="params.idCard"
            placeholder="请输入身份证号"
            style="width: 100%"
          />
        </div>
        <div class="name-row">
          <span class="title-row">性别</span>
          <RadioGroup v-model="params.sex">
            <Radio label="男"></Radio>
            <Radio label="女"></Radio>
          </RadioGroup>
        </div>
        <div class="name-row">
          <span class="title-row">出生日期</span>
          <Row>
            <Col span="12">
              <DatePicker
                type="date"
                placeholder="请选择出生日期"
                v-model="params.birthday"
                format="yyyy-MM-dd"
                style="width: 200px"
              ></DatePicker>
            </Col>
          </Row>
        </div>
        <div class="name-row">
          <span class="title-row">手机号</span>
          <Input
            v-model="params.mobile"
            placeholder="请输入手机号"
            style="width: 100%"
          />
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import Title from "./title.vue";
import Footer from "@/components/footer/my_footer.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import { addConsultant, searchConsultant, setConsulStatus } from "@/api/otwoo";
import { commonUrl } from "@/plugins/request";
import { json } from "body-parser";
export default {
  data() {
    return {
      //咨询人信息
      consultantList: [],
      expertName: "",
      askVal: "", //问题

      //添加的图片
      imgList: [
        {
          src: "../../assets/images/pay-success.png",
        },
        {
          src: "../../assets/images/pay-success.png",
        },
      ],
      isShow: false, //添加咨询人对话框
      uploadList: [], //图片
      accessToken: {}, // 验证token
      action: commonUrl + "/common/common/upload/file",
      //添加咨询人信息
      params: {
        birthday: "",
        idCard: "",
        mobile: "",
        sex: "男",
        username: "",
      },
    };
  },
  mounted() {
    this.accessToken.accessToken = localStorage.getItem("accessToken");
    this.searchConsultant();
    this.expertName = this.$route.query.expertName;
  },
  methods: {
    //咨询人切换选中
    chooseHandle(index) {
      if (this.consultantList[index].checked) {
        this.consultantList[index].checked =
          !this.consultantList[index].checked;
      } else {
        this.consultantList.forEach((item) => {
          item.checked = false;
        });
        this.consultantList[index].checked =
          !this.consultantList[index].checked;
      }
    },
    //查询咨询人
    searchConsultant() {
      searchConsultant().then((res) => {
        this.consultantList = res.result.map((item) => {
          item.checked = false;
          return item;
        });
      });
    },
    //添加咨询人
    addConsultantHandle() {
      addConsultant(this.params).then((res) => {
        if (res.success) {
          this.searchConsultant();
        } else {
          this.$Message.error("添加失败");
        }
      });
    },
    ok() {
      if (this.params.sex === "男") {
        this.params.sex = "1";
      } else {
        this.params.sex = "0";
      }
      this.params.birthday = this.params.birthday
        ? new Date(this.params.birthday).format("yyyy-MM-dd")
        : null;
      this.addConsultantHandle();
    },
    cancel() {},
    addHandle() {
      this.isShow = true;
    },
    //放大
    amplificationHandle(index) {
      console.log("放大");
    },
    //删除已经添加的图片
    delImgHandle(index) {
      this.imgList.splice(index, 1);
    },
    sureHandle() {
      if (this.consultantList.every((item) => !item.checked)) {
        this.$Message.warning("请选择咨询人");
        return;
      }
      if (!this.askVal || this.askVal.length < 10) {
        this.$Message.warning("病情描述不得少于10个字");
        return;
      }
      console.log(JSON.parse(localStorage.getItem("userInfo")));
      let nameObj =
        this.consultantList.filter((a) => {
          return a.checked;
        })[0] || {};
      let params = {
        description: this.askVal,
        descriptionImage: this.uploadList.join(","),
        expertId: this.$route.query.expertId,
        userId: (JSON.parse(localStorage.getItem("userInfo")) || {}).id || "",
        visitCardNo: nameObj.visitCardNo || "",
      };
      setConsulStatus(params).then((res) => {
        if (res.code == "200") {
          this.$router.push({
            path: `/pay/${res.result.orderSn}`,
            query: {
              text: this.askVal,
              imgList: this.uploadList.join(','),
              docName: this.expertName,
              nameObj: JSON.stringify(nameObj),
              user_id: this.$route.query.expertId,
              siteName: this.$route.query.siteName,
            },
          });
        } else {
          this.$Message.error(res.message || "咨询失败!");
        }
      });
    },
    handleRemove(index) {
      this.uploadList.splice(index, 1);
    },
    handleSuccess(res, file) {
      this.uploadList.push(res.result);
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc:
          "文件 " + file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。",
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "超出文件大小限制",
        desc: "文件 " + file.name + " 太大，不能超过 2M。",
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 3;
      if (!check) {
        this.$Notice.warning({
          title: "最多只能上传 3 张图片。",
        });
      }
      return check;
    },
  },
  components: {
    Title,
    Footer,
    MenuLocation,
  },
};
</script>
<style lang="scss" scoped>
.consulting-start {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  .main {
    padding: 0px calc(360 / 1920 * 100vw);
    .menu-location {
      height: calc(54 / 1920 * 100vw);
      display: flex;
      align-items: center;
      > img {
        width: calc(11 / 1920 * 100vw);
        height: calc(14 / 1920 * 100vw);
        margin-top: calc(-2 / 1920 * 100vw);
      }
      > span {
        margin-left: calc(11 / 1920 * 100vw);
      }
    }
    .start-content {
      background: #fff;
      padding: calc(33 / 1920 * 100vw) calc(20 / 1920 * 100vw)
        calc(73 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      .doctor-name {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        padding-bottom: calc(18 / 1920 * 100vw);
        .face {
          width: calc(16 / 1920 * 100vw);
          height: calc(18 / 1920 * 100vw);
          margin-left: calc(10 / 1920 * 100vw);
        }
        .title {
          color: #747474;
          font-size: calc(16 / 1920 * 100vw);
          margin-left: calc(7 / 1920 * 100vw);
        }
        .name {
          color: #2d2d2d;
          font-size: calc(18 / 1920 * 100vw);
          margin-left: calc(16 / 1920 * 100vw);
        }
      }
      .choose-consultant {
        .consultant-content {
          widows: 100%;
          margin-top: calc(30 / 1920 * 100vw);
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          .add-consultant {
            width: calc(220 / 1920 * 100vw);
            height: calc(87 / 1920 * 100vw);
            background: #f8f8f8;
            border-radius: calc(4 / 1920 * 100vw);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .add-btn {
              width: calc(16 / 1920 * 100vw);
              height: calc(15 / 1920 * 100vw);
            }
            .title {
              color: #333333;
              font-size: calc(14 / 1920 * 100vw);
              margin-left: calc(10 / 1920 * 100vw);
            }
          }
          .consultant-information {
            width: calc(220 / 1920 * 100vw);
            height: calc(87 / 1920 * 100vw);
            background: #f8f8f8;
            border-radius: calc(4 / 1920 * 100vw);
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            .choose-img {
              width: calc(18 / 1920 * 100vw);
              height: calc(18 / 1920 * 100vw);
              position: absolute;
              top: calc(12 / 1920 * 100vw);
              right: calc(10 / 1920 * 100vw);
              border-radius: calc(9 / 1920 * 100vw);
              overflow: hidden;
              cursor: pointer;
            }
            .name {
              margin-left: calc(47 / 1920 * 100vw);
            }
            .id {
              margin-left: calc(47 / 1920 * 100vw);
            }
          }
        }
      }
      .ask {
        .input-text {
          margin-top: calc(21 / 1920 * 100vw);
        }
      }
      .add-img {
        .add-row {
          margin-top: calc(22 / 1920 * 100vw);
          display: flex;
          .add-list:hover > .hover {
            display: flex;
          }
          .add-list {
            width: calc(104 / 1920 * 100vw);
            height: calc(104 / 1920 * 100vw);
            background: #f7f7f7;
            border-radius: calc(4 / 1920 * 100vw);
            overflow: hidden;
            background-size: cover;
            display: flex;
            position: relative;
            .face {
              width: calc(104 / 1920 * 100vw);
              height: calc(104 / 1920 * 100vw);
            }
            .hover {
              width: calc(104 / 1920 * 100vw);
              height: calc(104 / 1920 * 100vw);
              background-color: rgba(0, 0, 0, 0.2);
              //   display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              top: 0;
              left: 0;
              display: none;
              .amplification {
                width: calc(20 / 1920 * 100vw);
                height: calc(21 / 1920 * 100vw);
                cursor: pointer;
              }
              .del {
                width: calc(21 / 1920 * 100vw);
                height: calc(21 / 1920 * 100vw);
                margin-left: calc(19 / 1920 * 100vw);
                cursor: pointer;
              }
            }
          }
          .add-btn {
            width: calc(104 / 1920 * 100vw);
            height: calc(104 / 1920 * 100vw);
            background: #f7f7f7;
            border-radius: calc(4 / 1920 * 100vw);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .add-img {
              width: calc(34 / 1920 * 100vw);
              height: calc(31 / 1920 * 100vw);
            }
          }
        }
      }
      .sure-btn {
        width: calc(160 / 1920 * 100vw);
        height: calc(48 / 1920 * 100vw);
        background: #fd5151;
        font-size: calc(18 / 1920 * 100vw);
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: calc(48 / 1920 * 100vw);
        border-radius: calc(4 / 1920 * 100vw);
        margin-left: auto;
        margin-top: calc(126 / 1920 * 100vw);
      }
    }
  }
}
:deep(textarea.ivu-input) {
  height: calc(221 / 1920 * 100vw) !important;
}
:deep(.name-row) {
  display: flex;
  align-items: center;
  margin-top: 29px;
}
:deep(.name-row:last-of-type) {
  margin-bottom: 40px;
}
:deep(.title-row) {
  display: inline-block;
  width: 65px;
  text-align: right;
  font-size: 14px;
}
:deep(.ivu-input) {
  margin-left: 10px;
}
:deep(.ivu-radio-group) {
  margin-left: 10px;
}
:deep(.ivu-modal-footer) {
  border-top: none;
}
:deep(.ivu-modal-header-inner) {
  text-align: center;
  font-size: 20px;
}
:deep(.ivu-modal-header) {
  border: none;
}
.uploadCla {
  display: flex;
  justify-content: flex-start;
  align-items: self-end;
  .upload-list {
    display: flex;
    text-align: center;
    border-radius: 4px;
    background: #fff;
    .upload-list-item {
      width: 128px;
      height: 128px;
      line-height: 128px;
      margin-right: 4px;
      overflow: hidden;
      position: relative;
    }
    .upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
    }
  }
  .upload-list-item:hover .upload-list-cover {
    display: block;
  }
}
</style>
<style lang="less">
.startZx .ivu-upload .ivu-upload-drag {
  border: none;
}
</style>
